<style scoped>
.outer {
  position: relative;
  height: 460px;
}
.toolbar {
  width: 100%;
  position: relative;
  z-index: 10001;
}
.text {
  border: 1px solid #ccc;
  height: 400px;
}
.boxerl {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 320px;
}
.boxerh {
  z-index: 120;
  top: 66px;
  position: absolute;
  width: 100%;
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}
.scollbar {
  width: 100%;
  overflow-x: auto;
}
.blankinner {
  width: 768px;
  height: 5px;
  border: 1px solid white;
}
</style>
<template>
  <div>
    <Modal
      :value="modalState"
      :title="title"
      :loading="loading"
      :closable="false"
      ok-text="保存"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="50%">
        <div>
          <div style="font-size: 15px;">协议配置:</div>
          <div class="outer">
            <div id="scoller" class="scollbar" @scroll="doThis()">
              <div class="blankinner"></div>
            </div>
            <div id="inner" class="boxerl">
              <div id="div1" class="toolbar">
                <Button icon="md-trash" size="large" style="border: none; margin-top: -3px;" @click="handleClear"></Button>
              </div>
            </div>
            <div class="boxerh">
              <div id="div2" class="text">
              </div>
            </div>
          </div>
        </div>
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
import UploadImg from '_c/upload-img'
import { getToken } from '../../libs/util'
import E from 'wangeditor'
export default {
  name: 'GraphicModal',
  components: {
    UploadImg
  },
  data () {
    return {
      title: '',
      loading: true,
      editor: null,
      folder: 'task',
      actionUrl: '',
      content: '',
      imgUrl: '',
      token: getToken(),
      editorContent: '',
      ruleInline: {

      }
    }
  },
  updated () {
    this.title = '协议配置'
  },
  computed: {
    ...mapState({
      graphicList: state => state.graphic.graphicList,
      row: state => state.graphic.row,
      modalState: state => state.modal.modalState,
      configListData: state => state.parameterConfig.configListData
    })
  },
  methods: {
    ...mapActions(['updateModalState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleClear () {
      this.editor.txt.clear()
    },
    doThis () {
      var elem = document.getElementById('scoller')
      var inner = document.getElementById('inner')
      inner.scrollLeft = elem.scrollLeft
    },
    handleSubmit () {
      this.$emit('protocol-valid', {
        content: this.editorContent ? this.editorContent : this.row.content
      })
    },
    cancel () {
      this.updateModalState(false)
      this.editor.txt.clear()
    },
    handleUpload (url) {
      this.imgUrl = url
    }
  },
  created () {
    window.addEventListener('scroll', this.doThis)
  },
  mounted () {
    this.actionUrl = process.env.NODE_ENV === 'development' ? '/api/upload?folder=task' : 'http://rbackapi.baisha.work/upload?folder=task'
    this.editor = new E('#div1', '#div2')
    this.editor.customConfig.onchange = (html) => {
      this.editorContent = html
    }
    this.editor.customConfig.withCredentials = true
    this.editor.customConfig.debug = true
    this.editor.customConfig.uploadImgServer = this.actionUrl
    this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
    this.editor.customConfig.uploadImgHeaders = {
      'agent': 'Web',
      'token': this.token
    }
    this.editor.customConfig.uploadImgHooks = {
      before (xhr, editor, files) {

      },
      success (xhr, editor, result) {

      },
      fail (xhr, editor, result) {
        this.$Notice.warning({
          title: '文件大小不正确',
          desc: '请上传3M以下大小的图片'
        })
      },
      error (xhr, editor) {

      },
      timeout (xhr, editor) {

      },
      customInsert (insertImg, result, editor) {
        let url = result.host + result.data
        insertImg(url)
      }
    }
    this.editor.customConfig.pasteFilterStyle = false
    this.editor.create()
    this.editor.txt.html(this.configListData['c_serviceAgree']['value'])
  }
}
</script>
